// An highlighted block
import { useEffect, useState } from 'react';

const useAntdSize = () => {
    const [windowSize, setWindowSize] = useState< {
        paddingBlock: undefined | number
        paddingInline: undefined | number
    }>();

    useEffect(() => {
        const handler = () => {
            let paddingBlock = window.innerWidth * 3 / 1920;
            let paddingInline = window.innerWidth * 11 / 1920;
            setWindowSize({
                paddingBlock: paddingBlock,
                paddingInline: paddingInline
            })
        }
        handler()
        window.addEventListener('resize', handler)
      return () => {
        window.removeEventListener('resize', handler)
      }
    }, [])
    
    return  {
        Input: {
            paddingBlock: windowSize ? windowSize.paddingBlock : 4,
            paddingInline: windowSize ? windowSize.paddingInline : 11,
        }
    }

}

export default useAntdSize;

